<template>
    <div class="article_details_box displayBox">

        <!--        <div class="article_details_userInfo">-->
        <!--            &lt;!&ndash;用户信息&ndash;&gt;-->
        <!--            <UserInformation></UserInformation>-->

        <!--        </div>-->

        <div class="article_details_content">
            <!--文章标题-->
            <ArticleDetailsHeader :msg="article.info.title" :time="article.info.time"
                                  :visit="article.info.visit"></ArticleDetailsHeader>

            <!--            文章内容-->
            <div class="article_details_content_body outer_shadows" v-html="article.info.content"></div>

            <!--文章底部-->
            <ArticleDetailsTail @modify_status="modify_status" :statue="article.support_statue"
                                :num="article.info.support"></ArticleDetailsTail>
            <!--文章底部外链-->
            <ArticleDetailsBacklinks :title="article.info.title"></ArticleDetailsBacklinks>
            <br>
            <!--发表评论-->
            <ArticleDetailsPublication v-show="boolPub" @replySub="reply_sub_domain"></ArticleDetailsPublication>

            <!--评论内容列表-->
            <ArticleDetailsComments @reply_sub="reply_sub" :size="sizeComment" :reply-info="replyInfo"
                                    :list="article.comments"></ArticleDetailsComments>

        </div>

        <div class="article_details_recommend">
            <!--文章相关推荐-->
            <ArticleDetailsRecommend :list="recommend">
                <template v-slot:title><span>精选推荐</span></template>
            </ArticleDetailsRecommend>
            <br>

            <!--精选热点-->
            <ArticleDetailsRecommend :list="recommend">
                <template v-slot:title><span>精选热点</span></template>
            </ArticleDetailsRecommend>
            <br>

            <!--网站意见推荐收集-->
            <ArticleDetailsOpinion class="fixed_whether" v-show="opinion"
                                   @option-shut-down="optionShutDown"></ArticleDetailsOpinion>
            <br>
        </div>


    </div>
</template>

<script setup>
import ArticleDetailsHeader from "@/components/detail/ArticleDetailsHeader.vue";
import ArticleDetailsTail from "@/components/detail/ArticleDetailsTail.vue";
import ArticleDetailsBacklinks from "@/components/detail/ArticleDetailsBacklinks.vue";
import ArticleDetailsRecommend from "@/components/detail/ArticleDetailsRecommend.vue";
import ArticleDetailsPublication from "@/components/detail/ArticleDetailsPublication.vue";
import ArticleDetailsComments from "@/components/detail/ArticleDetailsComments.vue";
import {onMounted, ref} from "vue";
import ArticleDetailsOpinion from "@/components/detail/ArticleDetailsOpinion.vue";

import api from "@/request/index.js";
import router from "@/router/index.js";
import store from "@/store/index.js";
import digital from "@/config/methods/digital.js";


// 是否显示评论回复框
const boolPub = ref(true);


//子提交评论
const reply_sub = (info, index, bool) => {
    if (info === null) {
        return;
    }
    boolPub.value = bool
    //将评论新增到列表
    article.value.comments[index].comments.unshift({
        uid: store.state.user.id,//评论者的id
        replyId: article.value.comments[index].uid, //回复所属的用户id
        eid: article.value.info.id,//文章id
        pid: article.value.comments[index].id, //评论层级。0级位顶级
        time: new Date(),
        content: info
    });
    api.commentsAdd({
        uid: store.state.user.id,//评论者的id
        replyId: article.value.comments[index].uid, //回复所属的用户id
        eid: article.value.info.id,//文章id
        pid: article.value.comments[index].id, //评论层级。0级位顶级
        content: info
    }).then((res) => {
        sizeComment.value = sizeComment.value+1
        //获取评论
        api.commentsPageLevel(router.currentRoute.value.query.id).then((res) => {
            article.value.comments = res.data.data;
        })
    })
};

//传入子组件的,用户文章信息，以及评论层级
const replyInfo = ref({
    replyId: "", //回复所属的用户id
    eid: "",//文章id
    pid: 0, //评论层级。0级为顶级
});

//主提交评论
const reply_sub_domain = (info) => {
    if (info === null) {
        return;
    }
    //将评论新增到列表
    article.value.comments.unshift({
        uid: store.state.user.id,//评论者的id
        replyId: 0, //回复所属的用户id
        eid: article.value.info.id,//文章id
        pid: 0, //评论层级。0级位顶级
        time: new Date(),
        email: "",//评论者邮箱
        replyEmail: "",//回复所属的邮箱
        systems: window.localStorage.getItem("systems"),
        browser: window.localStorage.getItem("browser"),
        content: info
    });
    api.commentsAdd({
        uid: store.state.user.id,//评论者的id
        replyId: 0, //回复所属的用户id
        eid: article.value.info.id,//文章id
        pid: 0, //评论层级。0级位顶级
        email: "",//评论者邮箱
        replyEmail: "",//回复所属的邮箱
        systems: window.localStorage.getItem("systems"),
        browser: window.localStorage.getItem("browser"),
        content: info
    }).then((res) => {
        sizeComment.value = sizeComment.value+1
        //获取评论
        api.commentsPageLevel(router.currentRoute.value.query.id).then((res) => {
            article.value.comments = res.data.data;
        })
    });


}

//评论个数
const sizeComment = ref(0)

//评论个数
const countComment = () => {
    api.countComment(router.currentRoute.value.query.id).then((res) => {
        if (res.data.code === 200) {
            sizeComment.value = res.data.data

        }
    })
}


//修改文章点赞状态
const modify_status = (status) => {
    api.supportPut(article.value.info.id, status).then((res) => {
    })
    article.value.info.support += status ? 1 : -1;
    article.value.support_statue = status;

}

//文章以及评论列表数据
const article = ref({
    info: {
        id: "",//文章所属id
        uid: 1003,//文章所属用户id
        body: "文章内容", //文章内容
        title: "文章标题", //文章标题
        support: 0, //点赞数
        visit: 0, //浏览数
        time: "2017年12月13日",//文章时间
    },
    support_statue: false, //是否点赞
    //评论列表前十
    comments: [{
        id: 1,
        uid: 2996360031,
        replyId: 0,
        username: "哗啦啦",
        replyName: "呼啦啦",
        time: new Date(),
        content: "评论内容!",
        comments: []
    }]
});

//精选推荐内容
const recommend = ref([
    {title: "", visit: ""},
])


//预加载
onMounted(() => {

    //接受到的数据
    console.log(router.currentRoute.value.query.id)

    //文章以及评论列表数据
    api.getArticleById(router.currentRoute.value.query.id).then((res) => {
        article.value.info = res.data.data;
        replyInfo.value.replyId = article.value.info.uid;
        replyInfo.value.eid = article.value.info.id;

        document.title = article.value.info.title    //修改网页的title
    })

    //检查文章是否点赞
    if (store.state.user) {
        api.supportStatue((router.currentRoute.value.query.id)).then((res) => {
            article.value.support_statue = res.data.data;
        })
    }

    countComment();
    digital.platform(); //获取浏览器系统类型

    //热点内容列表数据
    api.getHotArticle([]).then((res) => {
        recommend.value = res.data.data;
    })

    //获取评论
    api.commentsPageLevel(router.currentRoute.value.query.id).then((res) => {
        article.value.comments = res.data.data;
        console.log(res.data.data)
    })

    //是否已填写过意见框
    opinion.value = window.localStorage.getItem("opinion_collection") == null;
})

//是否显示意见收集框
const opinion = ref(true);

//关闭意见框
const optionShutDown = () => {
    opinion.value = false;
}

</script>

<style scoped>

.article_details_box {

    margin: auto;
    display: flex;
    justify-content: center;
    margin-top: 25px;
}

.article_details_userInfo {
    width: 270px;
    padding: 0 10px;
}

.article_details_content {
    width: 800px;
    padding: 0 10px 10px 0;
}

.article_details_recommend {
    width: 280px;
}

.article_details_content_body {
    font-size: 20px;
    padding: 0 20px 30px;

}

.fixed_whether {
    position: sticky;
    top: 85px;
}


.image-container {
    position: relative;
    margin-bottom: 20px;
}

.image-container img {
    max-width: 100%;
    cursor: pointer;
}

.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
}

.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
}

.enlarged-img {
    display: block;
    margin: 0 auto;
    max-width: 90%;
    max-height: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
</style>